<!DOCTYPE html>
<html>
<head>
	<title>替换菜单</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<style>
		*{
			margin: 0 0;
			padding: 0 0;
		}
		.menu{
			margin-top: 20px;
		}
		.menu_catgory{
			box-shadow: 0px -3px 10px #dfdfe1;
			height: 36px;
			border-bottom: #dbdbdb solid 1px;
			padding: 6.5px 12px;
			background: #f9f9f9;
		}
		.catgory_left{
			white-space: nowrap;
			display: inline-block;
			width: 100%;
			height: inherit;
		}
		.catgory_right{
			display: inline-block;
			width: 100px;
			background: black;
			height: inherit;
		}
		.catgory_temp{
			display: inline-block;
			border-radius: 5px;
			overflow: hidden;
			margin-right: 12.5px;
			color: #111111;
			cursor:pointer;
		}
		.last{
			margin-right: 0px;
		}
		.catgory_temp_active {
			background: #ebebeb;
			color: #007aff;
		}
		.catgory_content {
			text-align: center;
			font-size: 15px;
			padding: 8px 13px;
			opacity: 0.75;
		}
		.goods_temp{
			display: inline-block;
			width: 100px;
			height: 80px;
			position: relative;
			margin: 10px 12.5px 15px;
			cursor: pointer;
		}
		.goods_top{
			position: absolute;
			color: white;
			font-size: 10px;
			background: #ff9538;
			padding: 5px 15px 5px 10px;
			border-radius: 0 12px 12px 0;
			opacity: 0.75;
		}
		.goods_temp>img{
			width: 100%;
			height: 63.5px;
			display: block;
		}
		.goods_bottom{
			font-size: 12px;
			color: #111111;
			text-align: center;
			height: 16.5px;
			line-height: 16.5px;
		}
		.menu_content {
			padding: 0 12.5px;
			height: 210px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div class="menu">
	<div class="menu_catgory">
		<div class="catgory_left" id="catgory_container">
			<div class="catgory_temp catgory_temp_active">
				<div class="catgory_content">床头柜</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床边柜</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床头</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床尾灯</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床尾凳</div>
			</div
			><div class="catgory_temp">
				<div class="catgory_content">床角</div>
			</div
			><div class="catgory_temp last">
				<div class="catgory_content">床卡卡</div>
			</div
			>
		</div>
	</div>
	<div class="menu_content" id = "goods_list">
		<div class="goods_temp">
			<div class="goods_top">地中海</div>
			<img class="goods_thumb" src="http://image4.youjiagou.com/images/s-20180320/48/27ccbf65d1078dff8421717daeb23707.png" />
			<div class="goods_bottom">￥3449</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	document.onselectstart=() => false;
	String.prototype.format = function () {
		if (arguments.length == 0)
			return this;
		else {
			let result = this;
			try {
				for (let i = 0, len = arguments.length; i < len; ++i) {
					result = result.replace ('{'+i+'}', arguments[i]+'');
				}
			} catch (error) {
				console.log(error);
			}
			return result;
		}
	};
	String.prototype.trim = function(){
		let result = this;
		result = result.replace(/\s{2,}/, ' ');
		result = result.replace(/^\s/, '');
		result = result.replace(/\s$/, '');
		return result;
	}
	Array.prototype.contains = function(target){
		if (this.length == 0)
			return false;
		for (let i = 0, len=this.length; i< len; ++i) {
			if (this[i] == target)
				return true;
		}
		return false;
	};
	let getChildNodes = function (obj) {
		if (obj.children)
			return obj.children;
		else {
			let nodes = obj.childNodes, results = [];
			for (let i = 0, len = nodes.length; i < len; ++i) {
				let node = nodes [i];
				if (node.nodeType == 1)
					results[resuls.length] = node;
			}
			return results;
		}
	}
	let generatorObj = function (innerHTML) {
		let tempObj = document.createElement('div');
		tempObj.innerHTML = innerHTML;
		let childNodes = getChildNodes(tempObj);
		return childNodes && childNodes.length!=0 && (childNodes||null);
	}

	let wheel = (function () {
		let events = {
			onup:null,
			ondown:null
		};
		let wheel= function (event) {
			let delta = (event = event||window.event) && ((event.wheelDelta && event.wheelDelta / 120 * (window.opera?-1:1)) || (event.detail && -event.detail /3));
			if (!delta)
				return;
			if (delta <0) {
				//向下滚动
				events.ondown&&events.ondown(-delta);
			} else {
				//向上滚动
				events.onup&&events.onup(-delta);
			}
		};
		window.addEventListener&&window.addEventListener('DOMMouseScroll', wheel, false);
		window.onmousewheel = document.onmousewheel = wheel;
		return events;
	})();
	let entryorout = function (obj) {
		let events = {
			entry: null,
			out: null
		};
		if (!!obj) {
			obj.onmouseenter=function() {
				events&&events.entry.apply(this,arguments);
			};
			obj.onmouseout=function(event){
				event = event || window.event;
				let bound = obj.getBoundingClientRect();
				if (event.clientX<bound.left||event.clientX>bound.right||event.clientY>bound.bottom||event.clientY<bound.top)
					events&&events.out.apply(this,arguments);
			};
		}
		return events;
	};

	let Catgory = (function(){
		let id = 'catgory_container';
		let activeClass = 'catgory_temp_active';
		let normalClass = 'catgory_temp';
		let innerHTML = '<div class="catgory_temp"><div class="catgory_content">{0}</div></div>';
		let ele = document.getElementById(id);
		let queue = [];
		let events = [function(obj){
			let reg = new RegExp("\\b({0})\\b".format(activeClass));
			if (reg.test(obj.className))
				return;
			let nodes = getChildNodes(ele);
			for (let i = 0, len = nodes.length; i < len; ++i) {
				let obj = nodes[i];
				obj.className = obj.className.replace(reg, '').trim();
			}
			let className = obj.className + ' ' + activeClass;
			obj.className = className.trim();
		}];
		let execEvents = function (obj) {
			for (let i = 0, len = events.length; i < len; ++i) {
				try {
					events[i].call(null, obj);
				} catch (error) {
					console.log(error);
				}
			}
		};
		ele.onclick = function(event){
			if (events.length == 0)
				return;
			let e = event||window.event;
			let target = (e.target || e.srcElement).parentNode;
			let reg = new RegExp("\\b({0})\\b".format(normalClass));
			if (reg.test(target.className))
				execEvents(target);
		};
		return {
			append:function(data){
				if (!data || queue.contains(data))
					return;
				let result = innerHTML.format(data.name);
				let obj = generatorObj(result)[0];
				data.htmlObj = obj;
				ele.append(obj);
				queue[queue.length] = data;
			},
			update:function(datas){
				if (!datas)
					return;
				queue = [];
				let results = '';
				for (let i = 0, len = datas.length; i < len; ++i) {
					let data = datas[i];
					results += innerHTML.format(data.name);
					queue[i]=data;
				}
				ele.innerHTML= results;
				let objs = getChildNodes(ele);
				for(let i = 0, len = objs.length; i < len; ++i){
					let obj = objs [i];
					datas[i].htmlObj=obj;
				}
			},
			appendHandle: function (handle){
				if(!handle || events.contains(handle))
					return;
				events[events.length]=handle;
			}
		}
	})();

	let GoodsList= (function(){
		let id = "goods_list";
		let innerHTML = '<div class="goods_temp">'
							+'<div class="goods_top">{0}</div>'
							+'<img class="goods_thumb" src="{1}" />'
							+'<div class="goods_bottom">{2}</div>'
						+'</div>';
		let normalClassName = 'goods_temp';
		let ele = document.getElementById(id);
		let queue = [], events = [];
		let execEvents = function () {
			if (events.length == 0)
				return;
			for (let i = 0, len = events.length; i < len; ++i) {
				events[i].apply(null, arguments);
			}
		};
		ele.onclick = function (event) {
			let e = event || window.event;
			let target = (e.target || e.srcElement);
			let reg = new RegExp("\\b({0})\\b".format(normalClassName));
			while(target != this) {
				if (reg.test (target.className)) {
					execEvents(target);
					break;
				} else {
					target = target.parentNode;
				}
			}
		};
		let entryoroutEvents=entryorout(ele);
		entryoroutEvents.entry=function () {
			wheel.onup = wheel.ondown = function (e) {
				ele.scrollTop += e*3;
			};
		};
		entryoroutEvents.out = function () {
			wheel.onup = null;
			wheel.ondown = null;
		};
		
		return {
			append:function(data){
				if (!data || queue.contains(data))
					return;
				let result = innerHTML.format(data.style, data.thumb, data.bottom);
				let obj = generatorObj(result)[0];
				data.htmlObj = obj;
				ele.append(obj);
				queue[queue.length] = data;
			},
			update:function(datas){
				if (!datas)
					return;
				queue = [];
				let results = '';
				for (let i = 0, len = datas.length; i < len; ++i) {
					let data = datas[i];
					results += innerHTML.format(data.style, data.thumb, data.bottom);
					queue[i]=data;
				}
				ele.innerHTML= results;
				let objs = getChildNodes(ele);
				for(let i = 0, len = objs.length; i < len; ++i){
					let obj = objs [i];
					datas[i].htmlObj=obj;
				}
			},
			appendHandle: function (handle){
				if(!handle || events.contains(handle))
					return;
				events[events.length]=handle;
			}
		};
	})();
	GoodsList.appendHandle (function(){
		console.log(arguments)
	});
	let arr = [], loop = 30;
	while(--loop>0){
		arr[arr.length]={
			style: '地中海',
			bottom: '￥1266.00',
			thumb: 'http://image4.youjiagou.com/images/s-20180320/48/27ccbf65d1078dff8421717daeb23707.png'
		};
	}
	GoodsList.update(arr);
</script>
</html>